<template>
  <div>
    <el-input disabled :value="$route.query.role_name"></el-input>
    <el-tree tyle="margin: 20px 0" ref="treeRef" :data="allPermissions" node-key="admin_menu_id" show-checkbox
      default-expand-all :props="defaultProps" />
    <el-button :loading="loading" type="primary" @click="save">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script lang="ts">
export default {
  name: "roleAuth",
};
</script>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import { ElInput, ElTree, ElButton, ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { getAssignRoleApi, getUserInfoApi, updateRoleApi } from "@/api/acl/role";
import { useUserInfoStore } from "@/stores/userInfo";
import item from "element-plus/es/components/space/src/item";

const userInfoStore = useUserInfoStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const allPermissions = ref<any>([]); // 所有
const treeRef = ref<InstanceType<typeof ElTree>>();
const disabledId = ref<any>()
const defaultProps = {
  children: "children",
  label: "menu_name",
  disabled: 'is_disable'
};

onMounted(() => init());

/* 
  初始化
*/
const init = () => {
  const admin_role_id = route.query.admin_role_id;
  getPermissions(admin_role_id);
};

/* 
  获取指定角色的权限列表
  */
const getPermissions = async (admin_role_id: any) => {
  const result1 = await getAssignRoleApi()
  const result2 = await getUserInfoApi(admin_role_id)

  allPermissions.value = result1.list as any;
  const arr2 = getCheckedIds(result1.list)
  const checkedIds = newArr(result2.admin_menu_ids, arr2)
  const a = getDisabledIds(result1.list)
  disabledId.value = a;
  
  treeRef.value?.setCheckedKeys(checkedIds);
};

/* 
  数组获取禁用id
*/
const getDisabledIds = (auths:any,initArr: string[] = []) => {
  auths.forEach((item:any) => {
    if (item.is_disable == 1) {
      initArr.push(item.admin_menu_id as string);
    } else if (item.children) {
      getDisabledIds(item.children, initArr);
    }
  });
  return initArr;
}
/* 
  数组去除 父id
*/
const newArr = (arr1: any, arr2: any) => {
  return arr1.filter((item: any) => !arr2.includes(item));
}
/* 
  获取非子级id
*/
const getCheckedIds = (auths: any, initArr: string[] = []) => {
  auths.forEach((item: any) => {
    if (item.children.length !== 0) {
      initArr.push(item.admin_menu_id as string);
      getCheckedIds(item.children, initArr);
    }
  });
  return initArr;
};


/* 
  保存权限列表
*/
const save = () => {
  // 得到所有全选的id
  const checkedIds = treeRef.value?.getCheckedKeys();
  // 得到所有半选的id
  const halfCheckedIds = treeRef.value?.getHalfCheckedKeys();
  // 合并全选和半选的id， 并用逗号连接成串
  var idss = checkedIds?.concat(halfCheckedIds as []);
  var ids = newArr(idss,disabledId.value)
  
  loading.value = true;
  updateRoleApi(route.query.admin_role_id as string, route.query.role_name, ids).then(async () => {
    loading.value = false;
    ElMessage.success("分配权限成功");
    await router.replace("/acl/role/list");
  });
};

/* 
  取消
  */
const cancel = () => {
  // 跳转到角色列表
  router.replace("/acl/role/list");
};
</script>
<style scoped lang="scss">
</style>
